<template>
  <view class="body">
    <view class="main">
      <view class="window">
        <image  :style="'width:'+canvasWidth+'px;height:'+canvasHeight+'px;background:'+canvasBackgroundColor"  :src="canvasImages"></image>
      </view>
      <view class="target_num">
        <view class="target_size">
          <text>文件目标:</text>
          <input class="kb-input" v-model="targetData.size" type="number" placeholder="" />
          <text>kb</text>
        </view>
      </view>
    </view>
    <view class="showImg2" :style="'width:' + initWidth + 'px;height:' + initHeight +'px'">
      <canvas style="width:100%;height:100%" canvas-id="myselfCanvas"></canvas>
    </view>
    <view class="showImg2" :style="'width:' + initWidth + 'px;height:' + initHeight +'px'">
      <canvas style="width:100%;height:100%" canvas-id="downloadCanvas"></canvas>
    </view>
    <view class="footer">
      <view @click="pictureClick">上传图片</view>
      <view @click="createImg">开始制作</view>
      <view @click="downLoadImg">下载图片</view>
    </view>
  </view>
</template>
<script>
import {savePoster} from '../create/saveImg.js'
import {fileBase64Size} from '../../util/imgSize.js'
let initWidth = 295
let initHeight = 413

export default {
  data() {
    return {
      // 画布背景颜色
      canvasBackgroundColor: '#FFFFFF',
      // 画板的换算比例宽度
      canvasWidth: 200,
      // 画板的固定高度
      canvasHeight: 280,
      // 人像分离后用于生成canvas的图片
      canvasImages: '',
      initWidth: initWidth,
      initHeight: initHeight,
      sizeSum: 0,
      targetData: {
        size: 1024,
        dpi: 96
      }
    }
  },
  methods: {
    pictureClick() {
      const _this = this;
      let typelist = ['album']
      uni.chooseImage({
        count: 1,
        sourceType: typelist,
        success: (res)=> {
          _this.sizeSum = res.tempFiles[0].size
          _this.canvasImages = res.tempFilePaths[0]
        }
      });
    },
    downLoadImg() {
      savePoster(this.canvasImages, 300)
    },
    createImg() {
      // 判断大小
      const _this = this
      this.buildImg(this.canvasImages).then(res => {
        this.canvasImages = res
        fileBase64Size(this.canvasImages).then(length => {
          console.log(length)
          if (length > _this.targetData.size) {
            _this.createImg()
          }else {
            uni.showToast({
              icon:'success',
              mask:true,
              title: '绘制完成',
            });
          }
        })
        
      })
      
    },
    buildImg(file) {
      const _this = this;
      return new Promise(resolve => {
        uni.showLoading({
          title: "图片制作中...",
        });
        uni.getImageInfo({
          src: file,
          success: function (res) {
            let imgH = res.height;
            let imgW = res.width;
            console.log(res)
            _this.initWidth = imgW
            _this.initHeight = imgH
            const ctx = uni.createCanvasContext("myselfCanvas", _this);
            ctx.drawImage(_this.canvasImages, 0, 0, imgW, imgH);
            ctx.draw(false,(ret)=>{						 
              
              
              uni.canvasToTempFilePath({ // 保存canvas为图片
                x: 0,
                y: 0,
                canvasId: 'myselfCanvas',
                quality: 0.9,
                fileType: 'jpg',
                complete: function(res) {
                  resolve(res.tempFilePath)
                } ,
              })
            });
          }
        })
      })
    }
  }
}
</script>
<style>
@import './index.css';
</style>